<template>

  <div>
    <el-form :inline="true">
      <br>
      <el-form-item>
        <template>
          <el-input
              v-model="search"
              placeholder="输入订单编号搜索"
              align="right"
              height="80px">
            <el-button slot="append" icon="el-icon-search" style="float: left"></el-button>
          </el-input>
        </template>
      </el-form-item>
    </el-form>

    <el-table
        ref="multipleTable"
        :data="tableData.filter(data => !search || data.orderId === +search)"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe>

      <el-table-column
          prop="orderId"
          label="订单编号"
          width="120">
      </el-table-column>

      <el-table-column
          prop="userId"
          label="下单用户"
      >
      </el-table-column>


      <el-table-column
          prop="orderMoney"
          label="金额"
      sortable>
        <template slot-scope="scope">
          ¥{{scope.row.orderMoney}}
        </template>
      </el-table-column>

      <el-table-column
          sortable
          prop="orderDate"
          label="下单日期">
      </el-table-column>

      <el-table-column
          prop="orderState"
          label="订单状态"
          :filters="[{ text: '已支付', value: 1 },{ text: '未支付', value: 0 }]"
          :filter-method="filterTag1"
          filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.orderState === 1" type="success">已支付</el-tag>
          <el-tag size="small" v-else-if="scope.row.orderState === 0" type="danger">未支付</el-tag>
        </template>
      </el-table-column>

      <!--订单对应的游戏-->
      <el-table-column type="expand" label="游戏" width="100">
        <template slot-scope="props">
          <el-table
              :data="props.row.orderItemList"
              style="width: 100%">
            <el-table-column
                label="游戏ID"
                width="100">
              <template slot-scope="scope">
                {{scope.row.game.gameId}}
              </template>
            </el-table-column>
            <el-table-column
                label=""
            >
              <template slot-scope="scope">
                <el-image
                    preview
                    :src="'http://localhost:8080/GameStore/images/'+scope.row.game.gameImg"
                    style="width: 80px;height: 80px;border-radius: 8px"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column
                label="游戏名称">
              <template slot-scope="scope">
                {{scope.row.game.gameName}}
              </template>
            </el-table-column>

            <el-table-column
                label="游戏类型">
              <template slot-scope="scope">
                {{scope.row.game.gameType}}
              </template>
            </el-table-column>

            <el-table-column
                label="价格"
                width="180">
              <template slot-scope="scope">
                  ¥{{scope.row.game.price}}
              </template>
            </el-table-column>
            <el-table-column
                label="销量"
                width="180">
              <template slot-scope="scope">
                {{scope.row.game.saleCount}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5,10,100,200,1000,10000]"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float: right">
    </el-pagination>



  </div>
</template>

<script>
export default {
  name: "orderManage",
  data() {
    return {
      orderItemList:[],
      search:'',
      forbiddenForm: {
        userId:'',
        status:''
      },

      total: 0,
      size: 100,
      current: 1,

      dialogVisible:false,
      editForm: {
        orderId:'',
        orderDate:'',
        orderUser:'',
        orderMoney:'',
        orderState:''
      },
      tableData: [
      ],

    }
  },
  created(){
    this.getOrderList();

  },
  methods:{
    filterTag(value, row) {
      return row.game.gameType === value;
    },
    filterTag1(value, row) {
      return row.orderState === value;
    },
    getOrderList() {
      this.$axios.get('/allOrders',{
        params:{
          size:this.size,
          current:this.current
        }
      }).then(res => {
        this.tableData = res.data.orderList
        this.total= res.data.total
        this.current= res.data.current
      })
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.$axios.post('/user/add' , this.editForm)
    //           .then(res => {
    //
    //             if(res.data.status === 200) {
    //               this.$message({
    //                 showClose: true,
    //                 message: '恭喜你，操作成功',
    //                 type: 'success',
    //                 onClose: () => {
    //                   this.getUserList()
    //                 }
    //               });
    //             }
    //
    //             this.dialogVisible = false
    //           })
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.editForm = {}
    },
    handleClose() {
      this.resetForm('editForm')
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size=val;
      this.getOrderList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current=val;
      this.getOrderList();
    }
  }
}
</script>

<style scoped>

.el-pagination {
  float: right;
  margin-top: 22px;
}

</style>